media query 4(media query) 는 웹 페이지의 내용이 모니터, 스마트폰 또는 태블릿과 같은 화면에서 페이지가 화면에 맞게 조정될 수 있도록 min-width, max-width 를 사용하여 화면 가로 사이즈에 따라 조정될 수 있도록 설정합니다. ex) min-width: 800px;, max-width: 800px; 코드 결과 화면 가로 사이즈가 800px 이하일 경우 display: none으로 설정했기 때문에 화면에 ... CSSmedia queryCSS 미디어 쿼리 디버깅 - CSS 코드 순서에 따른 상속 내가 하려고 했던건 검색 결과 history가 밑에 표시되게 하는 기능이었다. 그래서 이런식으로 코드를 작성했다. 반응형으로 만들려고 media query를 이용했다. 그러나 반응형이 동작해야하는 시점에 효과가 적용되지 않아서 개발자 도구를 살펴보니 media query가 cross out 되어있었다. 예전에도 이런 문제가 발생했었고 해결했는데 기록해두지 않아 까먹어서 이번 기회에 기록하려고... media querymedia query SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query React 에 Styled Component 끼얹기 그래도..! 기록을 남겨 두려고 한다. npm install styled-component npm install @types/styled-components styled-reset 패키지를 설치 하면 global reset 할 수 있다. npm i styled-reset 물론 선택적인 요소다. Record는 두개의 generic type 을 받을 수 있다. 프로퍼티 key 값을 K 타입으로,... media queryReactstyled componenttypescriptReact
4(media query) 는 웹 페이지의 내용이 모니터, 스마트폰 또는 태블릿과 같은 화면에서 페이지가 화면에 맞게 조정될 수 있도록 min-width, max-width 를 사용하여 화면 가로 사이즈에 따라 조정될 수 있도록 설정합니다. ex) min-width: 800px;, max-width: 800px; 코드 결과 화면 가로 사이즈가 800px 이하일 경우 display: none으로 설정했기 때문에 화면에 ... CSSmedia queryCSS 미디어 쿼리 디버깅 - CSS 코드 순서에 따른 상속 내가 하려고 했던건 검색 결과 history가 밑에 표시되게 하는 기능이었다. 그래서 이런식으로 코드를 작성했다. 반응형으로 만들려고 media query를 이용했다. 그러나 반응형이 동작해야하는 시점에 효과가 적용되지 않아서 개발자 도구를 살펴보니 media query가 cross out 되어있었다. 예전에도 이런 문제가 발생했었고 해결했는데 기록해두지 않아 까먹어서 이번 기회에 기록하려고... media querymedia query SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query React 에 Styled Component 끼얹기 그래도..! 기록을 남겨 두려고 한다. npm install styled-component npm install @types/styled-components styled-reset 패키지를 설치 하면 global reset 할 수 있다. npm i styled-reset 물론 선택적인 요소다. Record는 두개의 generic type 을 받을 수 있다. 프로퍼티 key 값을 K 타입으로,... media queryReactstyled componenttypescriptReact